<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Components</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
	<link rel="stylesheet" href="assets/css/ready.css">
	<link rel="stylesheet" href="assets/css/demo.css">
</head>
<body>
	<!-- <div class="wrapper">
		<div class="main-header">
			<div class="logo-header">
				<a href="index.html" class="logo">
					Ready Dashboard
				</a>
				<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
			</div>
			<nav class="navbar navbar-header navbar-expand-lg">
				<div class="container-fluid">
					
					<form class="navbar-left navbar-form nav-search mr-md-3" action="">
						<div class="input-group">
							<input type="text" placeholder="Search ..." class="form-control">
							<div class="input-group-append">
								<span class="input-group-text">
									<i class="la la-search search-icon"></i>
								</span>
							</div>
						</div>
					</form>
					<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="la la-envelope"></i>
							</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="la la-bell"></i>
								<span class="notification">3</span>
							</a>
							<ul class="dropdown-menu notif-box" aria-labelledby="navbarDropdown">
								<li>
									<div class="dropdown-title">You have 4 new notification</div>
								</li>
								<li>
									<div class="notif-center">
										<a href="#">
											<div class="notif-icon notif-primary"> <i class="la la-user-plus"></i> </div>
											<div class="notif-content">
												<span class="block">
													New user registered
												</span>
												<span class="time">5 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-icon notif-success"> <i class="la la-comment"></i> </div>
											<div class="notif-content">
												<span class="block">
													Rahmad commented on Admin
												</span>
												<span class="time">12 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-img"> 
												<img src="assets/img/profile2.jpg" alt="Img Profile">
											</div>
											<div class="notif-content">
												<span class="block">
													Reza send messages to you
												</span>
												<span class="time">12 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-icon notif-danger"> <i class="la la-heart"></i> </div>
											<div class="notif-content">
												<span class="block">
													Farrah liked Admin
												</span>
												<span class="time">17 minutes ago</span> 
											</div>
										</a>
									</div>
								</li>
								<li>
									<a class="see-all" href="javascript:void(0);"> <strong>See all notifications</strong> <i class="la la-angle-right"></i> </a>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false"> <img src="assets/img/fangzebin.jpg" alt="user-img" width="36" class="img-circle"><span >方泽斌</span></span> </a>
							<ul class="dropdown-menu dropdown-user">
								<li>
									<div class="user-box">
										<div class="u-img"><img src="assets/img/fangzebin.jpg" alt="user"></div>
										<div class="u-text">
											<h4>方泽斌</h4>
											<p class="text-muted">hello@themekita.com</p><a href="一.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a></div>
										</div>
									</li>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="https://fang_se_bin.gitee.io/curriculum_vitae/"><i class="ti-user"></i> 我的简历</a>
									<a class="dropdown-item" href="https://fang_se_bin.gitee.io/fangzebin/"></i> 我的博客</a>
									<a class="dropdown-item" href="index.html"><i class="fa fa-power-off"></i> 登出</a>
								</ul>
								<!-- /.dropdown-user -->
							<!-- </li>
						</ul>
					</div>
				</nav>
			</div>
			<div class="sidebar">
				<div class="scrollbar-inner sidebar-wrapper">
					<div class="user">
						<div class="photo">
							<img src="assets/img/fangzebin.jpg">
						</div>
						<div class="info">
							<a class="" data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>
									方泽斌
									<span class="user-level">Administrator</span>
									<span class="caret"></span>
								</span>
							</a>
							<div class="clearfix"></div>

							<div class="collapse in" id="collapseExample" aria-expanded="true" style="">
								<ul class="nav">
									<li>
										<a href="https://fang_se_bin.gitee.io/curriculum_vitae/">
											<span class="link-collapse">我的简历</span>
										</a>
									</li>
									<li>
										<a href="https://fang_se_bin.gitee.io/fangzebin/">
											<span class="link-collapse">我的博客</span>
										</a>
									</li>
									<li>
										<a href="index.html">
											<span class="link-collapse">登出</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<ul class="nav">
						<li class="nav-item">
							<a href="一.html">
								<i class="la la-dashboard"></i>
								<p>数据总故事</p>
								<span class="badge badge-count">5</span>
							</a>
						</li>
						<li class="nav-item active">
							<a href="二.html">
								<i class="la la-table"></i>
								<p>年末常住人口</p>
								<span class="badge badge-count">14</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="三.html">
								<i class="la la-keyboard-o"></i>
								<p>出生率与死亡率</p>
								<span class="badge badge-count">50</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="四.html">
								<i class="la la-th"></i>
								<p>平均年工资</p>
								<span class="badge badge-count">6</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="五.html">
								<i class="la la-bell"></i>
								<p>自然灾害</p>
								<span class="badge badge-success">3</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="六.html">
								<i class="la la-font"></i>
								<p>总结与建议</p>
								<span class="badge badge-danger">25</span>
							</a>
                        </li>
                        <li class="nav-item update-pro">
							<button  data-toggle="modal" data-target="#modalUpdate">
								<i class="la la-hand-pointer-o"></i>
                                <p>Update to pro</p>
							</button>
						</li>
						<li class="nav-item">
							<a href="https://gitee.com/fang_se_bin/python-final-project">
								<i class="la la-fonticons"></i>
								<p>技术文档</p>
							</a>
                        </li>
                        <li class="nav-item">
							<a href="https://data.stats.gov.cn/index.htm">
								<i class="la la-fonticons"></i>
								<p>数据来源</p>
							</a>
						</li>
						
					</ul>
				</div>
			</div> -->
			<!-- <div class="main-panel">
				<div class="content">
					<div class="container-fluid">
						<span id="stats_traffic" class="h2 font-weight-bold mb-0"></span>
                    </div> -->
                    <p class="mt-3 mb-0 text-muted text-sm">
                    </p> 
                  <!-- Page content -->
      <div class="container-fluid mt--0">
        <div class="row">
          <div class="col-xl-0 mb-0 mb-xl-0">
            <div class="card shadow">

              <div class="card-body">
  
  
                <div style="height: 100%;width: 200%">
					<!DOCTYPE html>
					<html>
					<head>
						<meta charset="UTF-8">
						<title>Awesome-pyecharts</title>
								<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
					
					</head>
					<body>
						<div id="b00309449ade439db6bee25a7da21fb3" class="chart-container" style="width:900px; height:500px;"></div>
						<script>
							var chart_b00309449ade439db6bee25a7da21fb3 = echarts.init(
								document.getElementById('b00309449ade439db6bee25a7da21fb3'), 'white', {renderer: 'canvas'});
							var option_b00309449ade439db6bee25a7da21fb3 = {
						"animation": true,
						"animationThreshold": 2000,
						"animationDuration": 1000,
						"animationEasing": "cubicOut",
						"animationDelay": 0,
						"animationDurationUpdate": 300,
						"animationEasingUpdate": "cubicOut",
						"animationDelayUpdate": 0,
						"color": [
							[
								"#99CC33"
							],
							[
								"#336699"
							],
							"#c23531",
							"#2f4554",
							"#61a0a8",
							"#d48265",
							"#749f83",
							"#ca8622",
							"#bda29a",
							"#6e7074",
							"#546570",
							"#c4ccd3",
							"#f05b72",
							"#ef5b9c",
							"#f47920",
							"#905a3d",
							"#fab27b",
							"#2a5caa",
							"#444693",
							"#726930",
							"#b2d235",
							"#6d8346",
							"#ac6767",
							"#1d953f",
							"#6950a1",
							"#918597"
						],
						"series": [
							{
								"type": "bar",
								"name": "\u4e2d\u5ea6\u5931\u80fd\u8001\u4eba",
								"legendHoverLink": true,
								"data": [
									40.0,
									25.4,
									22.1,
									10.8,
									1.7
								],
								"showBackground": false,
								"barMinHeight": 0,
								"barCategoryGap": "20%",
								"barGap": "30%",
								"large": false,
								"largeThreshold": 400,
								"seriesLayoutBy": "column",
								"datasetIndex": 0,
								"clip": true,
								"zlevel": 0,
								"z": 2,
								"label": {
									"show": true,
									"position": "top",
									"margin": 8
								}
							},
							{
								"type": "bar",
								"name": "\u91cd\u5ea6\u5931\u80fd\u8001\u4eba",
								"legendHoverLink": true,
								"data": [
									35.4,
									32.6,
									18.4,
									12.6,
									1.0
								],
								"showBackground": false,
								"barMinHeight": 0,
								"barCategoryGap": "20%",
								"barGap": "30%",
								"large": false,
								"largeThreshold": 400,
								"seriesLayoutBy": "column",
								"datasetIndex": 0,
								"clip": true,
								"zlevel": 0,
								"z": 2,
								"label": {
									"show": true,
									"position": "top",
									"margin": 8
								}
							}
						],
						"legend": [
							{
								"data": [
									"\u4e2d\u5ea6\u5931\u80fd\u8001\u4eba",
									"\u91cd\u5ea6\u5931\u80fd\u8001\u4eba"
								],
								"selected": {
									"\u4e2d\u5ea6\u5931\u80fd\u8001\u4eba": true,
									"\u91cd\u5ea6\u5931\u80fd\u8001\u4eba": true
								},
								"show": true,
								"right": "0%",
								"top": "35%",
								"orient": "vertical",
								"padding": 5,
								"itemGap": 10,
								"itemWidth": 25,
								"itemHeight": 14
							}
						],
						"tooltip": {
							"show": true,
							"trigger": "item",
							"triggerOn": "mousemove|click",
							"axisPointer": {
								"type": "line"
							},
							"showContent": true,
							"alwaysShowContent": false,
							"showDelay": 0,
							"hideDelay": 100,
							"textStyle": {
								"fontSize": 14
							},
							"borderWidth": 0,
							"padding": 5
						},
						"xAxis": [
							{
								"name": "\u670d\u52a1\u8005",
								"show": true,
								"scale": false,
								"nameLocation": "end",
								"nameGap": 15,
								"gridIndex": 0,
								"axisLabel": {
									"show": true,
									"position": "top",
									"rotate": 0,
									"margin": 8
								},
								"inverse": false,
								"offset": 0,
								"splitNumber": 5,
								"minInterval": 0,
								"splitLine": {
									"show": false,
									"lineStyle": {
										"show": true,
										"width": 1,
										"opacity": 1,
										"curveness": 0,
										"type": "solid"
									}
								},
								"data": [
									"\u5b50\u5973",
									"\u7b2c\u4e09\u65b9\u673a\u6784",
									"\u8001\u4f34",
									"\u4fdd\u59c6",
									"\u5176\u5b83"
								]
							}
						],
						"yAxis": [
							{
								"show": true,
								"scale": false,
								"nameLocation": "end",
								"nameGap": 15,
								"gridIndex": 0,
								"inverse": false,
								"offset": 0,
								"splitNumber": 5,
								"minInterval": 0,
								"splitLine": {
									"show": false,
									"lineStyle": {
										"show": true,
										"width": 1,
										"opacity": 1,
										"curveness": 0,
										"type": "solid"
									}
								}
							}
						],
						"title": [
							{
								"text": "\u5931\u80fd\u8001\u4eba\u670d\u52a1\u63d0\u4f9b\u8005\u5206\u5e03",
								"left": "center",
								"top": "0",
								"padding": 5,
								"itemGap": 10,
								"textStyle": {}
							}
						]
					};
							chart_b00309449ade439db6bee25a7da21fb3.setOption(option_b00309449ade439db6bee25a7da21fb3);
						</script>
					</body>
					</html>
					
					
					

</div>
</div>
</div>
</div>
<div class="col-xl-4">
	<div class="card shadow">
	  <div class="card-header bg-transparent">
		<div class="row align-items-center">
		  <div class="col">
			<h3>数据介绍：</h3>
			<!-- <h2 class="mb-0">养老服务价格</h2> -->
		  </div>
		</div>
	  </div>
	  <div class="card-body">
		<!-- Chart -->
		<div style="height: 100%;width: 100%">
		  <h4>2019年</h4>
		  <h4>失能老人服务提供者占比</h4>
		  <p> 1.从双型柱状图中我们可以看到无论是中度失能老人还是重度失能老人，其中给他们提供养老服务的占比最大的是子女，占比分别将近一半</p>
		  <p>2.其次于子女的是第三方的养老机构，其中养老机构服务重度失能老人的比例，占比32.6%大于中度失能老人，占比25.4%</p>
		<!-- </div>
	  </div>
	</div>
  </div>
</div> -->
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/chartist/chartist.min.js"></script>
<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script>
	$( function() {
		$( "#slider" ).slider({
			range: "min",
			max: 100,
			value: 40,
		});
		$( "#slider-range" ).slider({
			range: true,
			min: 0,
			max: 500,
			values: [ 75, 300 ]
		});
	} );
</script>
</html>